<template>
	<div>
		<!-- 返回、吸顶 -->
		<van-sticky :offset-top="0">
			<NavBarBack :title="datas.spTitle" />
		</van-sticky>
		<!-- 轮播 -->
		<div style="height:200px;overflow:hidden;width:100%">
			<SwipeBox v-if="datas.swipes" :data="{list:datas.swipes}" />
		</div>
		<!-- 产品的具体信息描述 -->
		<div style="width:95%;margin:0 auto">
			<div style="display:flex">
				<!-- 价格 -->
				<p style="color:red;flex:4">
					￥
					<span style="color:red;font-size:25px">{{datas.money}}</span>
					<van-tag round type="warning">大减价</van-tag>
				</p>
				<div style="flex:6;margin-top:5px;">
					<!-- 计时器 -->
					<van-count-down :time="time">
						<template v-slot="timeData">
							<span class="item">{{ timeData.hours + "时" }}</span>
							<span class="item">{{ timeData.minutes + "分" }}</span>
							<span class="item">{{ timeData.seconds + "秒" }}</span>
						</template>
					</van-count-down>
				</div>
			</div>
			<!-- 原价 -->
			<p style="color:#ccc;font-size:15px">
				原价
				<span style="text-decoration:line-through">￥699</span>
			</p>
			<div style="margin-top:10px;margin-bottom:10px">
				<!-- 优惠券单元格 -->
				<van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
				<!-- 优惠券列表 -->
				<van-popup v-model="showList" position="bottom">
					<van-coupon-list
						:coupons="coupons"
						:chosen-coupon="chosenCoupon"
						:disabled-coupons="disabledCoupons"
						@change="onChange"
						@exchange="onExchange"
					/>
				</van-popup>
			</div>
			<!-- 产品名称和信息 -->
			<div style="display:flex">
				<div style="flex:10;font-weight:900">
					<van-tag round color="red" size="large">天猫</van-tag>
					{{datas.title}}
				</div>
				<div style="flex:2;text-align:center;margin-top:10px">
					<!-- 分享按钮 -->
					<van-tag round size="large" type="primary">
						<van-icon name="browsing-history-o" />分享
					</van-tag>
				</div>
			</div>
			<!-- 推荐和分享按钮 -->
			<van-row style="text-align:center;font-size:14px;color:#7d7e80;margin-top:5px">
				<van-col span="12">
					<van-icon name="like-o" />十人推荐
				</van-col>
				<van-col span="12">
					<van-icon name="friends-o" />帮我选
				</van-col>
			</van-row>
			<!-- 发货地、快递费、月销售 -->
			<van-row style="margin-top:15px">
				<van-col span="8">
					<span style="font-size:15px;color:#7d7e80">发货</span>
					<van-icon name="location-o" />
					{{datas.dir}}
				</van-col>
				<van-col span="8">
					<p>快递：{{datas.freight}}</p>
				</van-col>
				<van-col span="8">
					<p style="font-size:15px;color:#7d7e80">月销售：{{datas.sold}}</p>
				</van-col>
			</van-row>
			<!-- 服务和宝贝评价 -->
			<p style="margin-bottom:10px">服务：{{datas.server}}</p>
			<van-cell is-link @click="showPopup">宝贝评价</van-cell>
			<van-tag round type="success" size="large">全是好评</van-tag>
			<van-popup v-model="show"></van-popup>
			<!-- 头像 -->
			<div style="display:flex;margin-top:5px">
				<van-image
					round
					width="30px"
					height="30px"
					src="https://tse3-mm.cn.bing.net/th?id=OIP.QNGmLsUJkqUpgMbYBMpPqQAAAA&w=206&h=206&c=7&o=5&dpr=1.25&pid=1.7"
				/>
				<!-- 昵称 -->
				<p style="display:inline-block;line-height:30px">weiway</p>
			</div>
			<!-- 评论内容 -->
			<p>这个宝贝真是太好用了，我超级喜欢的。下次还来这里买。</p>
			<!-- 宝贝详情 -->
			<div style="text-align:center;margin-top:10px">
				<h4 style="margin-bottom:15px">宝贝详情</h4>
				<van-image v-for="(item,index) in datas.details" :key="index" :src="item" width="100%" />
			</div>
		</div>
		<!-- 加入购物车 -->
		<van-sku
			v-model="show"
			stepper-title="我要买"
			:sku="sku"
			:goods="goods"
			:hide-stock="sku.hide_stock"
			reset-stepper-on-hide
		>
			<!-- 自定义 sku-header-price -->
			<template slot="sku-header-price" slot-scope="props">
				<div class="van-sku__goods-price">
					<span class="van-sku__price-symbol">￥</span>
					<span class="van-sku__price-num">{{ props.price }}</span>
				</div>
			</template>

			<!-- 自定义 sku actions -->
			<template slot="sku-actions">
				<div class="van-sku-actions">
					<van-button square size="large" type="warning">积分兑换</van-button>
					<!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
					<van-button square size="large" type="danger" @click="buy">买买买</van-button>
				</div>
			</template>
		</van-sku>
		<!-- 底部操作栏 -->
		<van-goods-action style="bottom:50px">
			<van-goods-action-icon icon="shop-o" text="店铺" info="12" />
			<van-goods-action-icon icon="chat-o" text="客服" info="2" />
			<van-goods-action-icon icon="cart-o" text="购物车" info="5" />
			<van-goods-action-button type="warning" text="加入购物车" @click="addShop"></van-goods-action-button>
			<van-goods-action-button type="danger" text="立即购买" @click="onClickBuy" />
		</van-goods-action>
	</div>
</template>

<script>
const coupon = {
	available: 1,
	condition: '无使用门槛\n最多优惠12元',
	reason: '',
	value: 150,
	name: '优惠券名称',
	startAt: 1489104000,
	endAt: 1514592000,
	valueDesc: '1.5',
	unitDesc: '元'
}
import NavBarBack from '../../components/navBarBack'
import SwipeBox from '../../components/swipebox'
import { detailApi } from '../../api/index'
export default {
	name: 'detail',
	components: {
		NavBarBack,
		SwipeBox
	},
	mounted() {
		detailApi(this.urlId).then(
			res => {
				// 判断后端的接口是否有
				if (res.code === 1) {
					// 赋值
					this.datas = res.data
				} else {
					this.$toast('该产品已下架')
				}
			},
			// eslint-disable-next-line no-unused-vars
			err => {
				this.$toast('网络错误，请求失败')
			}
		)
	},
	data() {
		return {
			urlId: this.$route.params.id,
			datas: {},
			time: 30 * 60 * 60 * 1000,
			chosenCoupon: -1,
			coupons: [coupon],
			disabledCoupons: [coupon],
			showList: false,
			show: false,
			goods: {
				// 商品标题
				title: '测试商品',
				// 默认商品 sku 缩略图
				picture:
					'https://tse1-mm.cn.bing.net/th?id=OIP.F7GGCa7xABDaI2TrBDRlJwHaHa&w=203&h=203&c=7&o=5&dpr=1.25&pid=1.7'
			},
			sku: {
				// 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
				// 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
				tree: [
					{
						k: '颜色', // skuKeyName：规格类目名称
						v: [
							{
								id: '30349', // skuValueId：规格值 id
								name: '红色', // skuValueName：规格值名称
								imgUrl:
									'https://tse1-mm.cn.bing.net/th?id=OIP.F7GGCa7xABDaI2TrBDRlJwHaHa&w=203&h=203&c=7&o=5&dpr=1.25&pid=1.7', // 规格类目图片，只有第一个规格类目可以定义图片
								previewImgUrl:
									'https://tse1-mm.cn.bing.net/th?id=OIP.F7GGCa7xABDaI2TrBDRlJwHaHa&w=203&h=203&c=7&o=5&dpr=1.25&pid=1.7' // 用于预览显示的规格类目图片
							},
							{
								id: '1215',
								name: '蓝色',
								imgUrl:
									'https://tse2-mm.cn.bing.net/th?id=OIP.HLxcFmsXd30zZ05MnSXNgAHaJW&w=203&h=257&c=7&o=5&dpr=1.25&pid=1.7',
								previewImgUrl:
									'https://tse2-mm.cn.bing.net/th?id=OIP.HLxcFmsXd30zZ05MnSXNgAHaJW&w=203&h=257&c=7&o=5&dpr=1.25&pid=1.7'
							}
						],
						k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
					}
				],
				// 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
				list: [
					{
						id: 2259, // skuId，下单时后端需要
						price: 100, // 价格（单位分）
						s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
						s2: '1193', // 规格类目 k_s 为 s2 的对应规格值 id
						s3: '0', // 最多包含3个规格值，为0表示不存在该规格
						stock_num: 110 // 当前 sku 组合对应的库存
					}
				],
				price: '1.00', // 默认价格（单位元）
				stock_num: 227, // 商品总库存
				collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
				none_sku: false, // 是否无规格商品
				messages: [
					{
						// 商品留言
						datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
						multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
						name: '留言', // 留言名称
						type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
						required: '1', // 是否必填 '1' 表示必填
						placeholder: '' // 可选值，占位文本
					}
				],
				hide_stock: false // 是否隐藏剩余库存
			}
		}
	},
	methods: {
		// 添加到购物车
		addShop() {
			// 1.向接口传入数据
			// 2.把数据存入到vuex
			// console.log(this.datas)
			// 解构
			const { swipes, id, label, spid, spTitle, money } = this.datas
			const data = {
				src: swipes[0], // 缩略图
				count: 1, // 买的个数
				id, // 产品id
				title: label.substring(0, 6), // 产品名称
				label, // 产品信息
				spid, // 店铺id
				spTitle, // 店铺名称
				money // 价格
			}
			// console.log(data)
			// 存入vuex
			this.$store.commit('saveShop', data)
		},

		onClickBuy() {
			// 跳转到提交订单页面
			this.show = true
		},
		onChange(index) {
			this.showList = false
			this.chosenCoupon = index
		},
		onExchange(code) {
			this.coupons.push(coupon)
		},
		showPopup() {
			this.show = true
		},
		go() {
			this.show = true
		},
		buy() {
			this.show = false
			this.$toast('成功加入购物车')
		}
	},
	// 从详情页返回列表页时，让列表页从缓存中拿
	// 路由守卫：路由拦截器---路由权限
	beforeRouteLeave(to, from, next) {
		// 设置下一个路由的meta
		to.meta.keepAlive = true // 让组件缓存
		next() // 只调用相当于传入了true，如果传入的是false，则阻止了路由跳转
	}
}
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
}
.item {
	display: inline-block;
	width: 30px;
	margin-right: 5px;
	color: #fff;
	font-size: 12px;
	text-align: center;
	background-color: #1989fa;
}
</style>